<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function () {
            $.ajax({
                // 请求方式
                type: "GET",
                // 请求的路径
                url: "LocationServlet",
                // 超时
                timeout:2000,
                // 期望得到的数据类型 json text
                dataType:"json",
                // 数据
                //data:{flag:"login",username:"admin"}
                //  默认异步
                async:true,
                data: {flag:"selectAllPro"},
                // 响应成功执行该函数
                success: function(arr,status,xhr){
                    // 删除之前的内容
                    $("#pid option:gt(0)").remove();
                    $("#cid option:gt(0)").remove();
                    $("#aid option:gt(0)").remove();
                    $.each(arr,function(i,e){
                        // 创建下拉框选项
                        $("<option/>").val(e.code).text(e.name).appendTo($("select:first"));
                    });
                },
                // 响应错误执行该函数
                error:function(){
                    alert("查询超时,请再次重试");
                }
            });
            $("#pid").change(function () {
                $.ajax({
                    // 请求方式
                    type: "GET",
                    // 请求的路径
                    url: "LocationServlet",
                    // 超时
                    timeout:2000,
                    // 期望得到的数据类型 json text
                    dataType:"json",
                    //  默认异步
                    async:true,
                    data: {flag:"selectCity",proCode:$("#pid").val()},
                    // 响应成功执行该函数
                    success: function(arr,status,xhr){
                        // 删除之前的内容
                        $("#cid option:gt(0)").remove();
                        $("#aid option:gt(0)").remove();
                        $.each(arr,function(i,e){
                            // 创建下拉框选项
                            $("<option/>").val(e.code).text(e.name).appendTo($("select:eq(1)"));
                        });
                    },
                });
            });
            $("#cid").bind({
                change:function () {
                    $.ajax({
                        // 请求方式
                        type: "GET",
                        // 请求的路径
                        url: "LocationServlet",
                        // 超时
                        timeout:2000,
                        // 期望得到的数据类型 json text
                        dataType:"json",
                        // 数据
                        //data:{flag:"login",username:"admin"}
                        //  默认异步
                        async:true,
                        data: {flag:"selectArea",cityCode:$("#cid").val()},
                        // 响应成功执行该函数
                        success: function(arr,status,xhr){
                            // 删除之前的内容
                            $("#aid option:gt(0)").remove();
                            $.each(arr,function(i,e){
                                // 创建下拉框选项
                                $("<option/>").val(e.code).text(e.name).appendTo($("select:eq(2)"));
                            });
                        },
                    });
                }
            });
        });
    </script>
</head>
<body >
省：<select id="pid" >
    <option value="0">请选择省份</option>
</select>
市：<select id="cid" >
    <option value="0">请选择城市</option>
</select>
区：<select id="aid">
    <option value="0">请选择区县</option>
</select>
</body>
</html>